<template>
  <div>
    <!-- 面包屑导航 -->
    <breadcrumb-nav>
      <template v-slot:firstMenu>小程序管理</template>
      <template v-slot:secondMenu>协议列表</template>
    </breadcrumb-nav>

    <!-- 卡片视图 -->
    <el-card>
      <!-- 添加协议 -->
      <agreement-add @update-list="updateAgreementList"/>

      <!-- 协议表格 -->
      <agreement-table :agreements-list="agreementsList" @update-list="updateAgreementList"/>
    </el-card>
  </div>
</template>

<style scoped>

</style>
<script >
// 公共组件
import BreadcrumbNav from "@/components/common/BreadcrumbNav.vue";

// 子组件
import AgreementAdd from "@/components/agreement/agreementChildComponents/AgreementAdd.vue";
import AgreementTable from "@/components/agreement/agreementChildComponents/AgreementTable.vue";
import AgreementRemove from "@/components/agreement/agreementChildComponents/AgreementRemove.vue";

import {getAgreementList} from "@/network/agreement";

export default {
  name: "Agreement",
  components: {
    BreadcrumbNav,
    AgreementAdd,
    AgreementRemove,
    AgreementTable
  },
  data() {
    return {
      agreementsList: [],
    }
  },
  created() {
    this.getAgreementsList();
  },
  methods: {
    // 获取协议列表
    getAgreementsList() {
      getAgreementList().then(({code,data,msg}) => {
        if (code !== 200) return this.$errorMessage(msg);
        this.agreementsList = data;
      })
    },

    // 监听子组件中发出的事件，重新获取协议列表
    updateAgreementList() {
      this.getAgreementsList();
    }
  }
}
</script>